<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <form>
            <input type="text" placeholder="姓名" v-model="name">
            <br>
            <input type="text" placeholder="年龄" v-model="age">
            <br>
            <input type="text" placeholder="性别" v-model="sex">
            <br>
            <input type="text" placeholder="手机" v-model="phone">
            <br>
            <button v-show="type==1" @click.prevent="add">新增</button>
            <button v-show="type==2" @click.prevent="update">修改</button>
        </form>
        <table border="1">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>手机</td>
                <td>操作</td>
            </tr>
            <tr v-for="(person, index) in list" :key="index">
                <td>{{person.name}}</td>
                <td>{{person.age}}</td>
                <td>{{person.sex}}</td>
                <td>{{person.phone}}</td>
                <td>
                    <button @click="edit(index)">修改</button>
                </td>
            </tr>
        </table>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                // 1新增  2修改
                type: '1',
                name: '',
                age: '',
                sex: '',
                phone: '',
                list: JSON.parse(localStorage.getItem('list')) || [],
                actIndex: ''
            },
            methods: {
                add() {
                    console.log(this.list);
                    this.list.push({
                        name: this.name,
                        age: this.age,
                        sex: this.sex,
                        phone: this.phone,
                    });
                    this.name = '';
                    this.age = '';
                    this.sex = '';
                    this.phone = '';
                    // 保存到本地
                    localStorage.setItem('list', JSON.stringify(this.list))
                },
                // 编辑信息时 需要先将原始信息显示在输入框中，在原来的基础上修改
                edit(index) {
                    this.name = this.list[index].name;
                    this.age = this.list[index].age;
                    this.sex = this.list[index].sex;
                    this.phone = this.list[index].phone;
                    this.type = '2'; // 进入编辑状态
                    this.actIndex = index; // 记录当前操作项的下标
                },
                // 更新信息
                update() {
                    let obj = {
                        name: this.name,
                        age: this.age,
                        sex: this.sex,
                        phone: this.phone,
                    }
                    // 替换信息
                    this.list.splice(this.actIndex, 1, obj);
                    this.type = '1'; // 恢复默认状态
                    // 清空输入框
                    this.name = '';
                    this.age = '';
                    this.sex = '';
                    this.phone = '';
                }
            }
        })
    </script>
</body>
</html>